<template>
	<view class="zaiui-find-box" :class="show ? 'show' : ''">
		<!--分类标题栏-->
		<view class="bg-white zaiui-title-tab-box">

			<!--小程序端的标题-->
			<!-- #ifdef MP -->
			<view class="text-center text-black zaiui-small-routine-title">发现</view>
			<!-- #endif -->

			<view class="flex flex-wrap">
				<view class="basis-l">
					<scroll-view scroll-x class="nav z">
						<block v-for="(item, index) in TabData" :key="index">
							<view class="cu-item text-black" :class="index == TabCur ? 'select' : ''" @tap="tabSelect"
								:data-id="index">
								<view>{{ item }}</view>
								<view class="tab-dot bg-red" />
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="basis-s text-right">
					<button class="cu-btn sm bg-red margin-top-xs" @tap="goToPublish">
						<text class="cuIcon-write" />
						<text class="margin-left-xs">发布</text>
					</button>
				</view>
			</view>
		</view>

		<!--占位的-->
		<view class="zaiui-seat-height" />

		<!--中间内容区域-->
		<view class="zaiui-view-content" v-if="TabCur == 0">

			<!--动态列表-->
			<trends-list :list_data="followgoodsList" :viewBtn="true" @userTap="trends_userTap"
				@followTap="trends_followTap" @contentTap="trends_contentTap" @imgTap="trends_imgTap"
				@talkTap="trends_talkTap" @viewBtnTap="trends_viewBtnTap" @commentTap="trends_commentTap"
				@appreciateTap="trends_appreciateTap" />

			<!--占位底部距离-->
			<view class="cu-tabbar-height" />
		</view>

		<!--中间内容区域-->
		<view class="zaiui-view-content" v-if="TabCur == 1">

			<!--为你推荐-->
			<recommend-scroll-list :list_data="recommendScrollData" @userTap="r_userTap" @followTap="r_followTap"
				@viewAllTap="r_viewAllTap" />

			<trends-list :list_data="goodsList" @userTap="trends_userTap" @followTap="trends_followTap"
				@contentTap="trends_contentTap" @imgTap="trends_imgTap" @talkTap="trends_talkTap"
				@forwardTap="trends_forwardTap" @commentTap="trends_commentTap" @appreciateTap="trends_appreciateTap"
				@loadMore="onLoadMore" ref="trendsList" />


			<!--占位底部距离-->
			<view class="cu-tabbar-height" />
		</view>

		<!--中间内容区域-->
		<view class="margin-top" v-if="TabCur == 2">
			<!--话题类型-->
			<topic-grid-list :list_data="topicGridData" @listTap="topicGridTap" />

			<view class="zaiui-view-content">
				<!--热门话题,小程序上无效，待查原因-->

				<!-- #ifndef MP  -->
				<hot-topic-list isSort="topic" :list_data="hotTopicData" @listTap="hotTopicTap"
					@viewAllTap="viewAllTap" />
				<!-- #endif -->

				<!--话题列表-->
				<topic-card-list :list_data="topicCardData" @listTap="topicCardTap" @viewTap="topicCardViewTap" />

				<!--占位底部距离-->
				<view class="cu-tabbar-height" />
			</view>
		</view>


	</view>
</template>

<script>
import trendsList from '@/components/list/trends-list';
import hotTopicList from '@/components/list/hot-topic-list';
import recommendScrollList from '@/components/list/recommend-scroll-list';
import topicGridList from '@/components/list/topic-grid-list';
import topicCardList from '@/components/list/topic-card-list';

//======================================================================
import _find_data from '@/api/find.js';	//虚拟数据
import _goods_data from '@/api/goods.js';
import _tool from '@/utils/tools.js';

export default {
	name: 'find',
	components: {
		trendsList, hotTopicList, recommendScrollList, topicGridList, topicCardList
	},
	data() {
		return {
			TabCur: 1,
			TabData: ['关注', '推荐', '广场'],
			followgoodsList: [], goodsList: [], hotTopicData: [], recommendScrollData: [],
			topicGridData: [], topicCardData: [],
			page: 1,
			pageSize: 1
		}
	},
	props: {
		show: {
			type: Boolean,
			default: true
		},
		scrollY: {
			type: Number,
			default: 0
		},
		scrollBottom: {
			type: Number,
			default: 0
		}
	},
	watch: {
		scrollY() {
			//通知他妈的滚动了。
			this.setPageScroll(this.scrollY);
		},
		scrollBottom() {
			if (this.scrollBottom != 0) {
				//通知他妈的触底了
				this.setReachBottom();
			}
		},
	},
	async created() {
		//加载虚拟数据
		const goodsList = await _goods_data.goodsList({ page: this.page, pageSize: this.pageSize });
		this.goodsList = goodsList.list || [];
		this.hotTopicData = await _find_data.hotTopicData();
		this.recommendScrollData = await _find_data.recommendScrollData();
		this.followgoodsList = await _goods_data.goodsList({ follow: 1, page: this.page, pageSize: this.pageSize });
		this.topicGridData = await _find_data.topicGridData();
		this.topicCardData = await _find_data.topicCardData();
	},
	mounted() {
		_tool.setBarColor(true);
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	},
	methods: {
		//页面被滚动
		setPageScroll(scrollTop) {
			//console.log(scrollTop);
		},
		//触底了
		setReachBottom() {
			console.log('触底了');
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		trends_userTap(e) {
			console.log('用户区域被点击：' + JSON.stringify(e));
		},
		trends_followTap(e) {
			console.log('关注按钮被点击：' + JSON.stringify(e));
		},
		trends_contentTap(e) {
			// 跳转到详情页/pages/trends/detail?id=1
			uni.navigateTo({
				url: `/pages/trends/detail?id=${e.currentTarget.dataset.id}`
			});
		},
		trends_imgTap(e) {
			console.log('图片被点击：' + JSON.stringify(e));
		},
		trends_talkTap(e) {
			console.log('话题被点击：' + JSON.stringify(e));
		},
		trends_forwardTap(e) {
			console.log('分享被点击：' + JSON.stringify(e));
		},
		trends_commentTap(e) {
			console.log('评论被点击：' + JSON.stringify(e));
		},
		trends_appreciateTap(e) {
			console.log('点赞被点击：' + JSON.stringify(e));
		},
		trends_viewBtnTap(e) {
			console.log('查看TA被点击：' + JSON.stringify(e));
		},
		hotTopicTap(e) {
			console.log(e);
		},
		viewAllTap() {
			console.log('点击了查看全部');
		},
		r_userTap(e) {
			console.log('用户信息被点击：' + JSON.stringify(e));
		},
		r_followTap(e) {
			console.log('关注按钮被点击：' + JSON.stringify(e));
		},
		r_viewAllTap() {
			console.log('点击了查看全部');
		},
		topicGridTap(e) {
			console.log(e);
		},
		topicCardTap(e) {
			console.log(e);
		},
		topicCardViewTap(e) {
			console.log(e);
		},
		goToPublish() {
			// 跳转到分类选择页面
			this.$emit('sellTap');
		},

		// 处理加载更多事件
		async onLoadMore(params) {
			try {
				// 调用分页接口获取更多数据
				const moreData = await _goods_data.goodsList({ page: params.page, pageSize: params.pageSize });

				// 检查是否有更多数据
				const hasMore = moreData.length > 0 && moreData.length === params.pageSize;

				// 如果有数据，追加到现有数据中
				if (moreData.length > 0) {
					this.goodsList = [...this.goodsList, ...moreData];
				}

				params.callback(hasMore);
			} catch (error) {
				console.error('加载更多数据失败:', error);
				// 加载失败时设置加载状态为false
				params.callback(false); // 失败时也应该停止加载
			}
		},

		// 重置加载状态（用于切换tab或刷新时）
		resetTrendsList() {
			this.page = 1;
			if (this.$refs.trendsList) {
				this.$refs.trendsList.resetLoadMore();
			}
		}


	}
}
</script>

<style lang="scss" scoped>
.zaiui-find-box {
	display: none;
}

.zaiui-find-box.show {
	display: block;
}

.zaiui-title-tab-box {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999999;
	padding: calc(var(--status-bar-height) + 9.09rpx) 27.27rpx 9.09rpx 9.09rpx;

	.flex {
		.basis-l {
			flex-basis: 70%;
		}

		.basis-s {
			flex-basis: 30%;
		}
	}
}

.zaiui-seat-height {
	width: 100%;

	/* #ifndef MP */
	height: calc(var(--status-bar-height) + 81.81rpx);
	/* #endif */

	/* #ifdef MP */
	margin-top: calc(var(--status-bar-height) + 185rpx);
	/* #endif */
}

.zaiui-view-content {
	padding: 0 27.27rpx 54.54rpx;
}

// 闲置商品样式
.search-bar {
	padding: 20rpx;
	background: white;

	.search-input {
		display: flex;
		align-items: center;
		background: #F5F5F5;
		border-radius: 40rpx;
		padding: 20rpx 30rpx;

		.placeholder {
			margin-left: 16rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
}

.goods-list {
	padding: 20rpx 0;
}

.goods-item {
	display: flex;
	background: white;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;

	.goods-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}

	.goods-info {
		flex: 1;
		margin-left: 20rpx;

		.goods-title {
			font-size: 32rpx;
			color: #333;
			line-height: 1.4;
			margin-bottom: 16rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.goods-price {
			margin-bottom: 16rpx;

			.current-price {
				font-size: 36rpx;
				color: #e54d42;
				font-weight: bold;
			}

			.original-price {
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
				margin-left: 12rpx;
			}
		}

	}
}
</style>
